import Clusterize from "clusterize.js/clusterize.js"

(function () {
    let template = function (self) {
        self.$scrollAreaId = "scrollAreaId" + Math.random().toString(36).substring(7);
        self.$scrollContentId = "scrollContentId" + Math.random().toString(36).substring(7);        
        return `
<div id="${self.$scrollAreaId}" class="clusterize-scroll">
    <div id="${self.$scrollContentId}" class="clusterize-content">${self.innerHTML}</div>
</div>
        `;
    };

    document.auiDefineElement("aux-visual-scroll", {
        template,
        props: {
        },
        created(self) {
            self.$ele.scrollArea = self.children[0];
            self.$ele.contentArea = self.$ele.scrollArea.children[0];
            self.$ele.noData = self.$ele.contentArea.children[0];
        },
        attached(self) {
            self.$control = new Clusterize({
                scrollId: self.$scrollAreaId,
                contentId: self.$scrollContentId
            })
        }
    });
})();
